<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿网站</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/Demo.css">
</head>
<body data-spy="scroll" data-target=".side-nav" data-offset="20">
    <!-- 右侧导航 -->
    <nav class="side-nav" role="navigation">
        <ul class="nav nav-pills nav-stacked nav-side">
            <li><a href="#onePage" data-toggle="tooltip" data-placement="left" title="onePage"></a></li>
            <li><a href="#twoPage" data-toggle="tooltip" data-placement="left" title="twoPage"></a></li>
            <li><a href="#threePage" data-toggle="tooltip" data-placement="left" title="threePage"></a></li>
            <li><a href="#fourPage" data-toggle="tooltip" data-placement="left" title="fourPage"></a></li>
            <li><a href="#fivePage" data-toggle="tooltip" data-placement="left" title="fivePage"></a></li>
        </ul>
    </nav>
    <!-- 第一页 -->
    <div class="onePage" id="onePage">
        <div class="onePage-bg" id="onePagebg"></div>
        <div class="container">
            <div class="row">
                <div class="title-text">
                    <div class="col-md-12 headFontSize">
                        <h1>
                            xxxTitle<br>
                            Welcome to here!
                        </h1>
                        <p>You can do anything.</p>
                        <p class="btn-demo">
                            <a class="btn btn-success btn-lg" href="#">START NOW</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第二页 -->
    <div class="twoPage" id="twoPage">
        <div class="twoPage-title">
            <h1>
                Select what you want to see!
            </h1>
        </div>
        <div class="row">
            <div class="twoPage-movie col-md-4">
                <a href="#">
                    <img src="../img/149010531892.jpg" style="width: 100%;" />
                    <div class="classIcon">
                        <h3>GAO_YUE</h3>
                        <h1><strong>秦时明月之高月</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twoPage-movie col-md-4">
                <a href="#">
                    <img src="../img/149010531892.jpg" style="width: 100%;" />
                    <div class="classIcon">
                        <h3>
                            GAO_YUE
                        </h3>
                        <h1><strong>秦时明月之高月</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twoPage-movie col-md-4">
                <a href="#">
                    <img src="../img/149010531892.jpg" style="width: 100%;" />
                    <div class="classIcon">
                        <h3>
                            GAO_YUE
                        </h3>
                        <h1><strong>秦时明月之高月</strong></h1>
                    </div>
                </a>
            </div>
        </div>
        <div class="twoPageBtn">
            <a id="twoPage-more" href="#" class="btn btn-success btn-lg">More...</a>
        </div>
    </div>
    <!-- 第三页 -->
    <div class="threePage" id="threePage">
        <div class="threePage-bg" id="threePageBg">
            <div class="threePageContent">
                <div class="threePageText">
                    <h1>New Movie</h1>
                    <p>Look that!! Look that!! <br>You can see anything...You can see anything...</p>
                </div>
                <a href="#" class="btn btn-info btn-lg threePageBtn">NEW START</a>
            </div>
        </div>
    </div>
    <!-- 第四页 -->
    <div class="fourPage" id="fourPage">
        <div class="container" style="width: 70%;">
            <div class="fourPageText">
                <h1>少司命</h1>
                <p>What about her?</p>
            </div>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="../img/111.jpg" alt="First slide">
                        <div class="carousel-caption">
                            <h3>ONE</h3>
                            <p>FIRST</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="../img/112.jpg" alt="Second slide">
                        <div class="carousel-caption">
                            <h3>TWO</h3>
                            <p>SECOND!</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="../img/113.jpg" alt="Third slide">
                        <div class="carousel-caption">
                            <h3>THREE</h3>
                            <p>THIRD!</p>
                        </div>
                    </div>
                </div>
                <!-- 轮播（Carousel）导航  -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
    <!-- 第五页 -->
    <div class="fivePage" id="fivePage">
        <div class="fivePageBg" id="fivePage-bg">
            <div class="container">
                <div class="fivePageText">
                    <p>Don't wait. Let's go...</p>
                </div>
                <div class="fivePageContent">
                    <div class="row">
                        <a href="#">
                            <div class="col-md-4">
                                <img src="../img/高月.jpg" class="fivePageImg">
                            </div>
                            <div class="col-md-4">
                                <img src="../img/高月.jpg" class="fivePageImg">
                            </div>
                            <div class="col-md-4">
                                <img src="../img/高月.jpg" class="fivePageImg">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="fivePageBtn">
                    <button type="button" class="btn btn-success btn-lg" style="font-size: 25px;">LET'S GO...</button>
                    <p class="fivePageBtnText">Anything in here...</p>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
</body>
</html>